<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>添加组员昵称</title>
		<script type="text/javascript">
			/* 
			0、输入框获取光标，自动删除内容
			1、点击继续添加 添加员工昵称
				- 昵称不能为空
				- 昵称不能含逗号
				- 昵称不能重复
			2、点击完成添加 显示员工昵称
				- 要求使用循环
				- 昵称要斜体展示
			 */
			// 页面加载事件
			window.onload = function(){
				// 获取标签
				var member  = document.querySelector("#member")
				var mycontinue  = document.querySelector("#continue")
				var complete  = document.querySelector("#complete")
				var msg  = document.querySelector("#msg")
				var arr = [] //存储昵称
				// 输入框获取光标，自动删除内容
				member.onfocus = function(){
					this.value = ""
				}
				
				// 点击继续添加 添加员工昵称
				mycontinue.onclick = function(){
					// 获取输入框内容---员工昵称
					var inp = member.value;
					if(inp==""){
						alert("昵称不能为空")
					}else if(inp.indexOf(",") != -1){
						alert("昵称不能含有逗号,")
					}else if(arr.indexOf(inp) != -1){
						alert("昵称不能重复")
					}else{
						arr.push(inp) //在数组中 追加昵称
					}
				}
				
				//点击完成添加 显示员工昵称
				complete.onclick = function(){
					msg.innerHTML = "你添加的组员昵称如下：<br/>"
					
					// arr = ["a","b"]
					// msg.innerHTML = msg.innerHTML + arr[0]
					// msg.innerHTML = msg.innerHTML + arr[1]
					arr.sort() // 数组排序
					for(var i in arr){
						msg.innerHTML = msg.innerHTML + arr[i].italics() + "<br/>"
					}
				}
			}
		</script>
	</head>
	<body>
		<label for="member">请输入组员昵称：</label>
		<input type="text" name="txtMember" id="member" autocomplete="off">
		<button id="continue">继续添加</button>
		<button id="complete">完成添加</button>
		<div id="msg">
			<!-- 你添加的组员昵称如下： -->
		</div>
	</body>
</html>
